<template>
  <div class="title">
    <div class="cdz-data">
      <div class="cdz-data-user">
        <div class="cdz-data-user-icon">
          <i class="el-icon-user-solid"></i>
        </div>
        <div class="cdz-data-user-text">
          <p>注册用户</p>
          <p class="cdz-data-user-text-num">{{userCount}}人</p>
        </div>
      </div>
      <div class="cdz-data-user">
        <div class="cdz-data-user-icon">
          <img src="@/assets/1.png" />
        </div>
        <div class="cdz-data-user-text">
          <p>总销售额</p>
          <p :style="style" class="cdz-data-user-text-num">{{sumSales}}元</p>
        </div>
      </div>
      <div class="cdz-data-saleinfo">
        <div class="cdz-data-sale">
          <div>
            退款订单数：
            <span>{{saleInfo.reCount}}</span>
          </div>
        </div>
        <div class="cdz-data-sale">
          <div>
            退款总额：
            <span>￥{{saleInfo.reSales}}</span>
          </div>
        </div>
        <div class="cdz-data-sale">
          <div>
            订单数：
            <span>{{saleInfo.sumCount}}</span>
          </div>
        </div>
        <div class="cdz-data-sale">
          <div>
            销售总额：
            <span>￥{{saleInfo.sumSales}}</span>
          </div>
        </div>
        <div class="cdz-data-sale">
          <div>
            总用电量：
            <span>{{saleInfo.totalPowerConsumption}}度</span>
          </div>
        </div>
      </div>
      <el-button style="margin-left:20px;margin-right:20px;height:40px" type="primary" @click="exporthandler">导出</el-button>
    </div>
    <div style="color:#fff;">
      <el-tabs v-model="activeName">
        <el-tab-pane label="销售统计" name="1">
          <!--<el-table v-loading="loading" :data="tableData" stripe style="width: 100%">-->
          <!--<el-table-column type="index" label="序号" align="center" min-width="100"></el-table-column>-->
          <!--<el-table-column prop="sumCount" label="订单数" align="center" min-width="100"></el-table-column>-->
          <!--<el-table-column prop="validCount" label="有效订单数" align="center" min-width="120"></el-table-column>-->
          <!--<el-table-column prop="sumSales" align="center" label="销售总额" min-width="80"></el-table-column>-->
          <!--<el-table-column prop="reSales" label="退款总额" align="center" min-width="120"></el-table-column>-->
          <!--<el-table-column prop="reCount" label="退款订单数" align="center" min-width="120"></el-table-column>-->
          <!--<el-table-column prop="createTime" label="订单时间 " align="center" min-width="120"></el-table-column>-->
          <!--</el-table>-->
          <div v-if="activeName == '1'">
            <chart style="width:100%;" ref="chart1" :options="salesOptions" :auto-resize="true"></chart>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    :total="total"
            ></el-pagination>
          </div>


        </el-tab-pane>
        <el-tab-pane label="用户统计" name="2">
          <div class="block">
            <el-select v-model="day" placeholder="请选择">
              <el-option
                      v-for="item in dayList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
              ></el-option>
            </el-select>



            <el-date-picker
                    v-model="date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    unlink-panels
                    value-format="yyyy-MM-dd"
            ></el-date-picker>
            <el-button type="primary" @click="getNewUserCount">搜索</el-button>
          </div>
          <div v-if="activeName == '2'">
            <chart style="width:100%;" ref="chart1" :options="userorgOptions" :auto-resize="true"></chart>
          </div>
        </el-tab-pane>
        <el-tab-pane label="设备统计" name="3">
          <el-button style="float:right;margin-right:20px;margin-bottom: 15px;" type="primary" @click="exportExcel">下载表格</el-button>
          <el-table v-loading="loading" :data="tableDataEquip" stripe style="width: 100%">
            <el-table-column type="index" label="序号" align="center" min-width="100"></el-table-column>
            <el-table-column prop="id" label="充电桩编号" align="center" min-width="100"></el-table-column>
            <el-table-column prop="name" label="充电桩名称" align="center" min-width="120"></el-table-column>
            <el-table-column prop="amount" align="center" label="金额" min-width="80"></el-table-column>
            <el-table-column prop="power" label="耗电量" align="center" min-width="120"></el-table-column>
            <el-table-column prop="usedNumber" label="使用频次" align="center" min-width="120"></el-table-column>
            <el-table-column prop="goodPort" label="有效端口 " align="center" min-width="120"></el-table-column>
            <el-table-column prop="badPort" label="损坏端口 " align="center" min-width="120"></el-table-column>
            <el-table-column prop="runningStatesName" label="运行状态" align="center" min-width="120"></el-table-column>
          </el-table>
          <el-pagination
                  @current-change="handleCurrentChangeDevice"
                  :current-page="page_device"
                  :page-size="pageSize_device"
                  :total="total_device"
          ></el-pagination>
        </el-tab-pane>

        <el-tab-pane label="充值统计" name="4">
          <!--<el-table v-loading="loading" :data="rechargeData" stripe style="width: 100%">
            <el-table-column type="index" label="序号" align="center" min-width="100"></el-table-column>
            <el-table-column prop="rechargeDate" label="日期" align="center" min-width="100"></el-table-column>
            <el-table-column prop="rechargeAmount" label="充值金额" align="center" min-width="120"></el-table-column>
            <el-table-column prop="refundAmount" label="退款金额" align="center"  min-width="100"></el-table-column>
            <el-table-column  label="操作" align="center" min-width="120">
              <template slot-scope="scope">
                <el-link @click="getDayRecharge(scope.row)">查看明细</el-link>
              </template>
            </el-table-column>
          </el-table>-->
          <div v-if="activeName == '4'">
            <chart style="width:100%;" ref="chart1" :options="rechargeOptions" :auto-resize="true"></chart>
          </div>
          <el-pagination
                  @current-change="handleCurrentChangeRechargeData"
                  :current-page="page_recharge"
                  :page-size="pageSize_recharge"
                  :total="total_recharge"
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import {
          getUsersAndSales,
          getSalesDetail,
          getNewUserCount,
          getSalesData,
          getPilesInfo,
          getRechargeDetail
  } from '@/api/statistics'
  export default {
    data() {
      return {
        loading: true,
        url: process.env.VUE_APP_BASE_API,
        total: 0,
        total_device: 0,
        total_recharge: 0,
        tableData: [],
        tableDataEquip: [],
        rechargeData: [],
        page: 1,
        pageSize: 9,
        page_device: 1,
        pageSize_device: 9,
        page_recharge: 1,
        pageSize_recharge: 9,
        saleInfo: {},
        dayList: [
          {
            value: 15,
            label: '最近十五天'
          },
          {
            value: 10,
            label: '最近十天'
          },
          {
            value: 5,
            label: '最近五天'
          }
        ],
        day: null,
        date: [],
        activeName: '1',
        sumSales: '',
        userCount: '',
        style: {},
        rechargeOptions:{
          title: {
            text: '充值统计'
          },
          tooltip: {
            trigger: 'axis',
            triggerOn: 'click',
            enterable: true,
            formatter: (params)=> {
              this.getDayRecharge({rechargeDate:params[0].axisValue});
            }
          },
          legend: {
            data: ['充值金额', '退款金额']
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '2%',
            top:'4%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []//
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '充值金额',
              type: 'line',
              data: [],
              itemStyle: {
                normal: {
                  color: "green",//折线点的颜色
                  lineStyle: {
                    color: "green"//折线的颜色
                  }
                }
              }
            },
            {
              name: '退款金额',
              type: 'line',
              data: [],
              itemStyle: {
                normal: {
                  color: "red",//折线点的颜色
                  lineStyle: {
                    color: "red"//折线的颜色
                  }
                }
              }
            }
          ]
        },
        salesOptions:{
          title: {
            text: '销售统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['订单数', '有效订单数', '销售总额', '退款总额', '退款订单数']
          },
          grid: {
            left: '2%',
            right: '2%',
            bottom: '2%',
            top:'4%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []//
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '订单数',
              type: 'line',
              data: [],
              itemStyle: {
                normal: {
                  color: "#82A6F5",//折线点的颜色
                  lineStyle: {
                    color: "#82A6F5"//折线的颜色
                  }
                }
              }
            },
            {
              name: '有效订单数',
              type: 'line',
              data: [],
              itemStyle: {
                normal: {
                  color: "#9FF048",//折线点的颜色
                  lineStyle: {
                    color: "#9FF048"//折线的颜色
                  }
                }
              }
            },
            {
              name: '销售总额',
              type: 'line',
              data: [],
              itemStyle: {
                normal: {
                  color: "#DE8100",//折线点的颜色
                  lineStyle: {
                    color: "#DE8100"//折线的颜色
                  }
                }
              }
            },
            {
              name: '退款总额',
              type: 'line',
              data: [],
              itemStyle: {
                normal: {
                  color: "#FF534D",//折线点的颜色
                  lineStyle: {
                    color: "#FF534D"//折线的颜色
                  }
                }
              }
            },
            {
              name: '退款订单数',
              type: 'line',
              data: [],
              itemStyle: {
                normal: {
                  color: "#FF5983",//折线点的颜色
                  lineStyle: {
                    color: "#FF5983"//折线的颜色
                  }
                }
              }
            }
          ]
        },
        userorgOptions: {
          tooltip : {
            trigger: 'axis'
          },
          xAxis: {
            type: 'category',
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [],
              type: 'line',
              smooth: true
            }
          ]
        }
      }
    },
    mounted() {
      this.getUsersAndSales()
      this.getSalesDetail()
      this.getSalesData()
      this.getPilesInfo()
      this.getNewUserCount()
      this.getRechargeDetail()
    },
    methods: {
      exportExcel(){
        window.location.href =
                this.url +
                '/Statistics/exportPilesInfo'
      },
      forState(row) {
        if (row.runningStatus == 0) {
          return '运行'
        } else if (row.runningStatus == 1) {
          return '离线'
        }
      },
      exporthandler() {
        // /Statistics/export
        window.location.href = this.url + '/Statistics/export'
      },
      handleCurrentChange(val) {
        this.page = val
        this.getSalesDetail()
      },
      handleCurrentChangeDevice(val) {
        this.page_device = val
        this.getPilesInfo()
      },handleCurrentChangeRechargeData(val) {
        this.page_recharge = val
        this.getRechargeDetail()
      },
      getSalesData() {
        getSalesData().then(res => {
          this.saleInfo = Object.assign({}, res.data)
        })
      },
      getPilesInfo() {
        let param = {
          pageNo: this.page_device,
          pageSize: this.pageSize_device
        }
        getPilesInfo(param).then(res => {
          if (res.data) {
            this.tableDataEquip = [...res.data.records]
            this.loading = false
            this.total_device = res.data.total
          }
        })
      },
      getUsersAndSales() {
        getUsersAndSales().then(res => {
          if (res.data.sumSales.toString().length <= 6) {
            this.style = Object.assign(
                    {},
                    {
                      'font-size': `28px`
                    }
            )
          } else if (
                  res.data.sumSales.toString().length > 6 &&
                  res.data.sumSales.toString().length <= 10
          ) {
            this.style = Object.assign(
                    {},
                    {
                      'font-size': `18px`
                    }
            )
          } else if (
                  res.data.sumSales.toString().length > 10 &&
                  res.data.sumSales.toString().length <= 15
          ) {
            this.style = Object.assign(
                    {},
                    {
                      'font-size': `12px`
                    }
            )
          } else if (res.data.sumSales.toString().length > 15) {
            this.style = Object.assign(
                    {},
                    {
                      'font-size': `6px`
                    }
            )
          }
          this.sumSales = res.data.sumSales
          this.userCount = res.data.userCount
        })
      },
      getSalesDetail() {
        let param = {
          pageNo: this.page,
          pageSize: this.pageSize
        };

        getSalesDetail(param).then(res => {
          if (res.data) {
            this.salesOptions.xAxis.data = [...[]]
            this.salesOptions.series[0].data = [...[]];
            this.salesOptions.series[1].data = [...[]];
            this.salesOptions.series[2].data = [...[]];
            this.salesOptions.series[3].data = [...[]];
            this.salesOptions.series[4].data = [...[]];
            res.data.records.forEach(element => {
              this.salesOptions.xAxis.data.push(element.createTime)
              //'订单数', '有效订单数', '销售总额', '退款总额', '退款订单数'
              this.salesOptions.series[0].data.push(element.sumCount);
              this.salesOptions.series[1].data.push(element.validCount);
              this.salesOptions.series[2].data.push(element.sumSales);
              this.salesOptions.series[3].data.push(element.reSales);
              this.salesOptions.series[4].data.push(element.reCount);
            })
            this.tableData = [...res.data.records]
            this.loading = false
            this.total = res.data.total
          }
        })
      },
      getRechargeDetail() {
        let param = {
          pageNo: this.page_recharge,
          pageSize: this.pageSize_recharge
        }
        getRechargeDetail(param).then(res => {
          if (res.data) {
            this.rechargeData = [...res.data.records]
            this.loading = false
            this.total_recharge = res.data.total

            this.rechargeOptions.xAxis.data = [...[]]
            this.rechargeOptions.series[0].data = [...[]];
            this.rechargeOptions.series[1].data = [...[]];
            res.data.records.forEach(element => {
              this.rechargeOptions.xAxis.data.push(element.rechargeDate)
              //'充值金额', '退款金额'
              this.rechargeOptions.series[0].data.push(element.rechargeAmount);
              this.rechargeOptions.series[1].data.push(element.refundAmount);
            })


          }
        })
      },
      getDayRecharge(row) {
        this.$router.push({
          path: '/dayRecharge',
          query: {
            date: row.rechargeDate
          }
        })
      },
      getNewUserCount() {
        let param = {
          startTime: this.date[0],
          endTime: this.date[1],
          day: this.day
        }
        getNewUserCount(param).then(res => {
          this.userorgOptions.xAxis.data = [...[]]
          this.userorgOptions.series[0].data = [...[]]
          res.data.forEach(element => {
            this.userorgOptions.xAxis.data.push(element.createTime)
            this.userorgOptions.series[0].data.push(element.count)
          })
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .title {
    margin-top: 20px;
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  .xstx {
    display: flex;
    flex-direction: row;
  .item {
    width: 100px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
  }
  }

  .cdz-data {
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    cursor: pointer;
  .cdz-data-saleinfo {
    width: 300px;
    height: 120px;
    display: flex;
    flex-direction: column;
    background-color: #062c4c;
  // align-items: center;
    justify-content: space-evenly;
  .cdz-data-sale {
    font-size: 14px;
    margin-left: 10px;
  div {
  span {
    color: #00e6de;
    font-weight: 600;
  }
  }
  }
  }
  .cdz-data-user {
    width: 300px;
    height: 120px;
    background-color: #062c4c;
    margin-right: 40px;
    display: flex;
    flex-direction: row;
  div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .cdz-data-user-icon {
    font-size: 60px;
    color: #00e6de;
  img {
    width: 60px;
    height: 60px;
  }
  }
  .cdz-data-user-text {
    display: flex;
    flex-direction: column;
  .cdz-data-user-text-num {
    font-size: 28px;
    color: #1fc3f2;
    padding: 10px;
  }
  }
  }
  }
  }
</style>
